<template>
    <div class="person">
        <ul>
            <li v-for="item in list" :key="item.id">
                {{ item.id }} -- {{ item.name }}--{{ item.age }}
            </li>
        </ul>
    </div>
</template>

<script lang="ts">
export default {
  name: 'Person',
}
</script>

<script lang="ts" setup >
// import { defineProps } from 'vue'
import {type Persons } from '@/types/index'

// 第一种写法：仅接收
// const props = defineProps(['list'])
// const props = defineProps<{list?: Persons }>()
// 第二种写法：接收+限制类型
// const props =defineProps<{list:Persons}>()

// 第三种写法：接收+限制类型+指定默认值+限制必要性
 withDefaults(defineProps<{list?: Persons }>(), {
    list: () => [{ id: 'asdasg01', name: '小猪佩奇', age: 18 }]
})
</script>